<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="个人作品集 - 展示我的项目和技能">
    <title>个人作品集</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 页面加载动画 -->
    <div class="loader" id="loader">
        <div class="loader-content">
            <div class="loader-spinner"></div>
            <div class="loader-text">加载中...</div>
        </div>
    </div>
    <header>
        <nav class="navbar">
            <div class="nav-container">
                <div class="nav-logo">
                    <h1>我的作品集</h1>
                </div>
                <ul class="nav-menu">
                    <li class="nav-item">
                        <a href="#home" class="nav-link">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#about" class="nav-link">关于我</a>
                    </li>
                    <li class="nav-item">
                        <a href="#projects" class="nav-link">项目</a>
                    </li>
                    <li class="nav-item">
                        <a href="#contact" class="nav-link">联系</a>
                    </li>
                </ul>
                <div class="hamburger">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
            </div>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="hero-content">
                <h2 class="hero-title">欢迎来到我的作品集</h2>
                <p class="hero-subtitle">我是一名充满激情的开发者</p>
                <button class="cta-button" onclick="scrollToSection('projects')">查看我的作品</button>
            </div>
        </section>

        <section id="about" class="about">
            <div class="container">
                <h2 class="section-title">关于我</h2>
                <div class="about-content">
                    <div class="about-text">
                        <h2>关于我</h2>
                        <p><strong>Python Developer</strong>，擅长消息中间件、实时数据处理、高可用架构设计。拥有丰富的后端开发经验，专注于构建可扩展、高性能的系统架构。</p>
                        <p>技术栈涵盖Python、Next.js、MongoDB、ElasticSearch、Rust等领域，其中对Python和MongoDB最为熟悉，其次是Next.js和ElasticSearch，最后正在深入学习和实践Rust。</p>
                        <p>除了编程，我还喜欢<strong>Rust</strong>编程语言，以及<strong>幸运星</strong>、<strong>孤独摇滚</strong>、<strong>摇曳露营</strong>等动漫作品。我相信技术可以改变世界，并致力于通过代码创造有价值的解决方案。</p>
                        <div class="skills">
                            <h3>技能</h3>
                            <ul class="skills-list">
                                <li>Python</li>
                                <li>MongoDB</li>
                                <li>Next.js</li>
                                <li>ElasticSearch</li>
                                <li>Rust</li>
                                <li>消息中间件</li>
                                <li>实时数据处理</li>
                                <li>高可用架构</li>
                            </ul>
                        </div>
                        <div class="timeline">
                            <h3>专业经历</h3>
                            <div class="timeline-item">
                                <div class="timeline-year">2021-2023</div>
                                <div class="timeline-content">
                                    <h4>OpenAI</h4>
                                    <p>软件工程师</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-year">2017-2020</div>
                                <div class="timeline-content">
                                    <h4>Google</h4>
                                    <p>软件工程师</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-year">2014-2016</div>
                                <div class="timeline-content">
                                    <h4>斯坦福大学</h4>
                                    <p>硕士</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-year">2010-2014</div>
                                <div class="timeline-content">
                                    <h4>清华大学</h4>
                                    <p>本科</p>
                                </div>
                            </div>
                        </div>
                        <div class="achievements">
                            <h3>个人成就</h3>
                            <ul class="achievements-list">
                                <li>🏆 清华大学优秀毕业生</li>
                                <li>🏅 微软MVP</li>
                                <li>🎖️ 华为开发者认证</li>
                            </ul>
                        </div>
                    </div>
                    <div class="about-image">
                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&h=300&fit=crop&crop=face" alt="个人照片" class="profile-img">
                    </div>
                </div>
            </div>
        </section>

        <section id="projects" class="projects">
            <div class="container">
                <h2 class="section-title">我的项目</h2>
                <div class="projects-grid">
                    <div class="project-card">
                        <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=400&h=200&fit=crop" alt="Web开发项目" class="project-image">
                        <div class="project-info">
                            <h3>现代化Web应用</h3>
                            <p>使用React和Node.js开发的全栈Web应用，具有响应式设计和优秀的用户体验。</p>
                            <div class="project-links">
                                <a href="#" class="project-link">查看演示</a>
                                <a href="#" class="project-link">查看代码</a>
                            </div>
                        </div>
                    </div>
                    <div class="project-card">
                        <img src="https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?w=400&h=200&fit=crop" alt="移动应用项目" class="project-image">
                        <div class="project-info">
                            <h3>移动应用开发</h3>
                            <p>跨平台移动应用，使用Flutter框架开发，支持iOS和Android双平台。</p>
                            <div class="project-links">
                                <a href="#" class="project-link">查看演示</a>
                                <a href="#" class="project-link">查看代码</a>
                            </div>
                        </div>
                    </div>
                    <div class="project-card">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=200&fit=crop" alt="数据分析项目" class="project-image">
                        <div class="project-info">
                            <h3>数据分析平台</h3>
                            <p>基于Python和机器学习的数据分析平台，提供可视化数据洞察和预测功能。</p>
                            <div class="project-links">
                                <a href="#" class="project-link">查看演示</a>
                                <a href="#" class="project-link">查看代码</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="contact">
            <div class="container">
                <h2 class="section-title">联系我</h2>
                <div class="contact-content">
                    <div class="contact-info">
                        <h3>联系方式</h3>
                        <p>如果您对我的工作感兴趣，或者有项目合作的想法，请随时联系我！</p>
                        <ul class="contact-list">
                            <li>📧 邮箱: 2023616675@qq.com</li>
                            <li>📱 微信: 欢迎添加我的微信</li>
                            <li>🏢 地址: 中国，北京</li>
                        </ul>
                        <div class="social-media">
                            <h4>社交媒体</h4>
                            <div class="social-links-horizontal">
                                <a href="mailto:2023616675@qq.com" class="social-link-email" title="发送邮件">
                                    <span class="social-icon">📧</span>
                                    <span>QQ邮箱</span>
                                </a>
                                <a href="#" class="social-link-wechat" title="微信联系">
                                    <span class="social-icon">💬</span>
                                    <span>微信</span>
                                </a>
                                <a href="#" class="social-link-github" title="GitHub">
                                    <span class="social-icon">🐙</span>
                                    <span>GitHub</span>
                                </a>
                                <a href="https://baobao.github.io" class="social-link-website" title="个人网页">
                                    <span class="social-icon">🌐</span>
                                    <span>个人网页</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <form class="contact-form" onsubmit="handleSubmit(event)">
                        <h3>发送消息</h3>
                        <div class="form-group">
                            <label for="name">您的姓名</label>
                            <input type="text" id="name" name="name" placeholder="请输入您的姓名" required>
                        </div>
                        <div class="form-group">
                            <label for="email">您的邮箱</label>
                            <input type="email" id="email" name="email" placeholder="请输入您的邮箱地址" required>
                        </div>
                        <div class="form-group">
                            <label for="message">留言内容</label>
                            <textarea id="message" name="message" rows="5" placeholder="请告诉我您的想法或合作意向..." required></textarea>
                        </div>
                        <button type="submit" class="submit-button">发送消息 ✉️</button>
                    </form>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 我的作品集. 保留所有权利.</p>
            <div class="social-links">
                <a href="#" class="social-link">GitHub</a>
                <a href="#" class="social-link">LinkedIn</a>
                <a href="#" class="social-link">Twitter</a>
            </div>
        </div>
    </footer>

    <script src="main.js"></script>
    <script>
        // 页面加载完成后隐藏加载动画
        window.addEventListener('load', function() {
            const loader = document.getElementById('loader');
            setTimeout(function() {
                loader.style.opacity = '0';
                setTimeout(function() {
                    loader.style.display = 'none';
                }, 500);
            }, 1000);
        });
    </script>
</body>
</html>